<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="renderer" content="webkit" />
    <title>公共样式演示demo</title>
    <link rel="stylesheet" href="../dist/css/common-frame-page.css">
    <link rel="stylesheet" href="../dist/lib/H/css/H.min.css">
    <script type="text/javascript" src="../dist/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../dist/lib/H/js/H.min.js"></script>
</head>
<body>
<!--面包屑-->
<div class="cm-bread-crumbs">
    流程审批<span class="partition">&gt;</span>加班申请<span class="partition">&gt;</span>加班详情
</div>

<!--文字颜色-->
<div style="background: #e2e2e2; padding: 5px;">
    <span class="cm-text-white ml20px">白色</span>
    <span class="cm-text-blue ml20px">蓝色</span>
    <span class="cm-text-orange ml20px">橙色</span>
</div>

<!-- tab -->
<ul class="cm-nav mt10px">
    <li class="item active">按销售店铺设置</li>
    <li class="item">按商品分类设置</li>
    <li class="item">按商品设置</li>
    <li class="clear"></li>
</ul>

<!--数据列表A-->
<table class="cm-table mt15px">
    <tr class="text-left">
        <th colspan="10">基本信息</th>
    </tr>
    <tr>
        <td class="col-txt">订单编号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售平台单号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售店铺</td>
        <td>天猫</td>
        <td class="col-txt">订单当前状态</td>
        <td class="cm-text-blue">促销计算完成</td>
        <td class="col-txt">订单类型</td>
        <td>预售订单</td>
    </tr>
    <tr>
        <td class="col-txt">订单编号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售平台单号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售店铺</td>
        <td>天猫</td>
        <td class="col-txt">订单当前状态</td>
        <td class="cm-text-blue">促销计算完成</td>
        <td class="col-txt">订单类型</td>
        <td>预售订单</td>
    </tr>
    <tr>
        <td class="col-txt">订单编号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售平台单号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售店铺</td>
        <td>天猫</td>
        <td class="col-txt">订单当前状态</td>
        <td class="cm-text-blue">促销计算完成</td>
        <td class="col-txt">订单类型</td>
        <td>预售订单</td>
    </tr>
    <tr>
        <td class="col-txt">订单编号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售平台单号</td>
        <td>1234233452432</td>
        <td class="col-txt">销售店铺</td>
        <td>天猫</td>
        <td class="col-txt">订单当前状态</td>
        <td class="cm-text-blue">促销计算完成</td>
        <td class="col-txt">订单类型</td>
        <td>预售订单</td>
    </tr>
</table>

<!--数据列表B-->
<div class="cm-table-top mt15px">
    <span class="fl">商品库存列表</span>
    <span class="fr">共有<span class="cm-text-orange">20</span>条搜索结果</span>
</div>
<table class="cm-table">
    <tr class="text-left">
        <th>商品编号</th>
        <th>商品名称</th>
        <th>实物库存</th>
        <th>销售库存</th>
    </tr>
    <tr class="hover">
        <td>1233456657</td>
        <td>北京同仁堂 柏子养心丸 60g</td>
        <td>120</td>
        <td>110</td>
    </tr>
    <tr class="hover">
        <td>1233456657</td>
        <td>北京同仁堂 柏子养心丸 60g</td>
        <td>120</td>
        <td>110</td>
    </tr>
    <tr class="hover">
        <td>1233456657</td>
        <td>北京同仁堂 柏子养心丸 60g</td>
        <td>120</td>
        <td>110</td>
    </tr>
    <tr class="hover">
        <td>1233456657</td>
        <td>北京同仁堂 柏子养心丸 60g</td>
        <td>120</td>
        <td>110</td>
    </tr>
</table>

<!--分页-->
<div id="J-pager-wrap" class="cm-pager-wrap"></div>
<!--分页模版-->
<script type="text/html" id="J-pager-tpl">
    <span class="ui-pager-txt">
        <select>
            <option>每页显示30条</option>
            <option>每页显示50条</option>
            <option>每页显示100条</option>
        </select>
        &nbsp;&nbsp;&nbsp;
        共<em><%= total %></em>条记录
    </span>
    <div class="ui-pager">
        <a class="J-page-to <%= els[1].cls == 'ui-pager-can ui-pager-active' ? 'ui-pager-cant' : els[1].cls %>" data-pg="<%= els[1].pg %>">首页</a>
        <% $.each(els, function (i, item) { %>
        <a class="J-page-to <%= item.cls %>" data-pg="<%= item.pg %>"><%= item.name %></a>
        <% }) %>
        <a class="J-page-to <%= els[els.length - 2].cls == 'ui-pager-can ui-pager-active' ? 'ui-pager-cant' : els[els.length - 2].cls %>" data-pg="<%= els[els.length - 2].pg %>">末页</a>
    </div>
</script>

<!--弹窗内容模版-->
<script type="text/html" id="J-tpl-demo01">
    <div class="tpl">
        <table class="cm-table">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>30</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>30</td>
                <td>男</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>30</td>
                <td>男</td>
            </tr>
        </table>
    </div>
</script>

<script>
    var pagerA = new H.Pager({
        tplB : $('#J-page-tpl').html(),
        wrapB : $('#J-page-wrap'),
        goToPageFunc : function (pageNum) {
            pagerA.render({
                pg: pageNum,
                total: 120,
                ps: 10
            });
        }
    });

    pagerA.render({
        pg: 5,
        total: 120,
        ps: 10
    });

    //关于弹窗组件 H.dialog，更多使用实例请到我的 github 查看 demo （地址：https://github.com/YD-Feng/H.Util/blob/master/demo-Dialog.html）
    $('#J-button-dialog').on('click', function(){
        //定义一个弹窗
        var d = H.dialog({
            title: '弹窗标题',
            content: $('#J-tpl-demo01').html(),//弹窗内容
            quickClose: true,//点击空白处快速关闭
            padding: 5,//弹窗内边距
            width: 400,//弹窗宽度(缺省时为自适应，但默认最大宽度为1000)
            height: 200,//弹窗高度(缺省时为自适应，但默认最大高度为600)
            backdropOpacity: 0.7,//遮罩层透明度(默认0.7)
            onshow: function(){
                //alert('弹窗弹出后执行的回调');
            },
            onclose: function(){
                //alert('弹窗关闭后执行的回调');
            }
        });
        //显示弹窗
        d.show();
    });
</script>
</body>
</html>
